<!--  -->
<template>
  <div class="body"  @click="$router.push({ path: `/book/${book.id}` })">
    <div class="left">
      <van-image :src="book.img" width="70" height="102" fit="contain" />
    </div>
    <div class="right">
      <p class="title">{{ book.title }}</p>
      <p class="desc">{{ book.description }}</p>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等)

export default {
  // import引入的组件需要注入到对象中才能使用
  props: {
    book: {
      type: Object,
      required: true,
    },
  },
  components: {},
  data() {
    return {};
  },

  computed: {},

  watch: {},

  methods: {},
  mounted() {},
  filters:{
      percentfilter(num)
      {
          if(num===0)
          {
              return "";
          }
          else{
              return num*100+'%';
          }
      }
  }
};
</script>
<style lang="less" scoped>
.body {
  display: flex;
  padding: 15px;
  background-color: #fff;
}
.right {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  .title {
    font-size: 18px;
    font-weight: 700;
  }
  .desc {
      font-size: 14px;
    margin-top: 13px;
    height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .status{
      margin-top: 15px;
      .percent{
          font-size: 18px;
          color: #EB1E1E;
      }
  }
}
/* @import url(); 引入公共css类 */
</style>